<template>
  <div class="workOrderList">
    <form class="content-form">
      <div class="form-top text-right">
        <span class="form-top-title pull-left">工单列表</span>
        <button type="button" class="btn btn-default" v-on:click="list()">查找</button>&nbsp;
        <router-link class="btn btn-default" to="/workOrder/save">新建</router-link>
        <button type="button" class="btn btn-default">导出</button>
      </div>
      <div class="form-inline form-content">
        <br>
        <div class="form-group">
          <span class="form--header--label">工单编号&emsp;</span>
          <input type="text" class="form-control" placeholder=""/>
        </div>
        <div class="form-group">
          <span class="form--header--label">纸质工单号</span>
          <input type="text" class="form-control" placeholder=""/>
        </div>
        <div class="form-group">
          <span class="form--header--label">外部工单号</span>
          <input type="text" class="form-control" placeholder=""/>
        </div>
        <div class="form-group">
          <span class="form--header--label">门店名称&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">门店编号&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">客户名称&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">服务商&emsp;&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">工程师&emsp;&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">创建日期&emsp;</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期" class="my-list-select"
                          :picker-options="today"></el-date-picker>
        </div>
        <div class="form-group">
          <span class="form--header--label">&emsp;&emsp;至&emsp;&emsp;</span>
          <el-date-picker v-model="value2" type="date" placeholder="选择日期" class="my-list-select"
                          :picker-options="startDate"></el-date-picker>
        </div>
        <div class="form-group">
          <span class="form--header--label">结束日期&emsp;</span>
          <input type="text" class="form-control" placeholder="" readonly/>
        </div>
        <div class="form-group">
          <span class="form--header--label">&emsp;&emsp;至&emsp;&emsp;</span>
          <input type="text" class="form-control" placeholder="" readonly/>
        </div>
        <div class="form-group">
          <span class="form--header--label">设备型号&emsp;</span>
          <input type="text" class="form-control search-uibTypeahead">
        </div>
        <div class="form-group">
          <span class="form--header--label">工单类型&emsp;</span>
          <select name="type" id="type" class="form-control my-list-select">
            <option value="">全部</option>
          </select>
        </div>
        <div class="form-group">
          <span class="form--header--label">工单等级&emsp;</span>
          <select class="form-control my-list-select">
            <option value="">全部</option>
            <option value="0">日常</option>
            <option value="1">紧急</option>
          </select>
        </div>
        <div class="form-group">
          <span class="form--header--label">工单状态&emsp;</span>
          <select name="status" id="status" class="form-control my-list-select">
            <option value="">全部</option>
          </select>
        </div>
      </div>
    </form>
    <div class="content-list">
      <table class="table table-bordered table-hover text-center">
        <tbody>
        <tr class="first-tr">
          <td>序号</td>
          <td>工单编号</td>
          <td>纸质工单号</td>
          <td>外部工单号</td>
          <td>服务商</td>
          <td>工程师</td>
          <td>客户</td>
          <td>门店编号</td>
          <td>门店</td>
          <td>门店所在省</td>
          <!--<td>品牌</td>-->
          <td>设备名称</td>
          <td>设备型号</td>
          <td>状态</td>
          <td>类型</td>
          <td>等级</td>
          <td>报修描述</td>
          <td>完成时间</td>
          <td>总费用</td>
          <td>操作</td>
        </tr>
        <tr v-for="(list,index) in contentList">
          <td v-text="index+1"></td>
          <td>
            <router-link to="" class="form--header--href" v-text="list.num"></router-link>
          </td>
          <td v-text="list.paperOrderSn"></td>
          <td v-text="list.omdsn"></td>
          <td v-text="list.enterpriseName"></td>
          <td v-text="list.engineer"></td>
          <td v-text="list.customer"></td>
          <td v-text="list.storeSn"></td>
          <td v-text="list.storeName"></td>
          <td v-text="list.storeProvince + ' ' + list.storeCity"></td>
          <!--<td v-text="list.brand"></td>-->
          <td v-text="list.deviceName"></td>
          <td v-text="list.deviceModel"></td>
          <td>
            <div style="width: 80px;text-align: left;">
              <span v-text="list.status"></span>&nbsp;
              <div v-if="list.slaName" title="list.slaName" class="red sla">
                警
              </div>
              <i style="vertical-align: middle" v-if="list.status == '未派工' && list.engineer != undefined"
                 class="red fa fa-2x fa-exclamation-circle" aria-hidden="true"></i>
            </div>
          </td>
          <td v-text="list.type"></td>
          <td>
            <span v-if="list.orderLevel == 0">日常</span>
            <span v-if="list.orderLevel == 1">紧急</span>
          </td>
          <td>
            <span v-text="list.repairContent"></span>
          </td>
          <td v-text="list.finishTime"></td>
          <td>
            <span v-if="list.settlementStatus == 's08'" v-text="list.settlementBill"></span>
            <span v-if="list.settlementStatus != 's08' && list.settlementBill > 0"
                  v-text="list.settlementBill"></span>
            <span v-if="list.settlementStatus != 's08' && list.settlementBill <= 0">-</span>
          </td>
          <td>
            <router-link to="" v-if="list.status == '未派工'" class="form--header--href">修改</router-link>
            <!--<br>-->
            <!--<a href="" class="form&#45;&#45;header&#45;&#45;href">取消</a>-->
          </td>
        </tr>
        <tr v-if="contentList == undefined">
          <td colspan="50" class="text-center"><h5><i class="fa fa-spinner fa-spin"></i>&nbsp;数据搬运中....</h5></td>
        </tr>
        <tr v-if="contentList.length < 1">
          <td colspan="50" class="text-center alert-danger">暂无数据</td>
        </tr>
        </tbody>
      </table>
      <div class="content-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 30,50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="300">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'workOrderList',
    data () {
      return {
        msg: '工单列表',
        today: {
//            设置禁用
          disabledDate: (time) => {
            let endDate = this.value2;//获取选择的结束日期
            let status = false;
            if (time.getTime() < Date.now() - 8.64e7) {
//                  设置今天之前的日期不可选
              status = true;
            } else if (endDate && time.getTime() > endDate) {
//                  设置结束日期之后的日期不可选
              status = true;
            } else {
              status = false;
            }
            return status;
          }
        },
        startDate: {
//            设置禁用
          disabledDate: (time) => {
            let beginDate = this.value1;//获取选择的开始日期（disabledDate函数必须是箭头函数）
//            设置开始日期之前的日期不可选
            return time.getTime() < beginDate;
          }
        },
        value1: '',
        value2: '',
        contentList:[]
      }
    },
    created: function () {
//      list(){
      let params = {
        "pageNumber": 1,
        "pageSize": 10
      };
      this.$axios({
        url: '/workOrder/list',
        method: 'POST',
        data: params
      }).then(res => {
        this.contentList = res.lists.content;
      })
        .catch(error => {
//            console.log(error);
        })
//      }
    },
    methods: {
      handleSizeChange(val) {//改变pageSize时触发
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {//改变pageNumber时触发
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import "../assets/commn/commn";

  .workOrderList {
    width: 100%;
    .content-form {
      .form-top {
        .btn {
          margin-left: 12px;
          border: 1px solid #dddddd;
          border-radius: 2px;
        }
        .form-top-title {
          font-size: 16px;
          color: #3d3d3d;
          font-weight: 600;
        }
      }
      .form-content {
        margin: 15px 0;
        border: 1px solid #EEEEEE;
        padding: 0 15px 15px 15px;
        border-radius: 5px
      }
      .form-content:before {
        content: '查询条件';
        position: relative;
        top: -13px;
        padding: 0 5px;
        left: 0px;
        font-weight: 600;
        font-size: 15px;
        background-color: #ffffff;
        color: #000000;
      }
    }
  }

  .form-control {
    width: 179px;
  }
</style>
